<!-- Page header -->
<style>
.container {
 height: 180px;
 overflow-y: scroll;
 margin-top: 50px;
}
.data, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 padding: 4px;
}
#myChart{
	margin-top: 100px;
}
  
</style>


<!-- Page body -->

<div class="container">
  <div>查看焦虑问卷测评分数：</div>
  <hr>
  <table border="1px" id="tab1" class="data">
    <thead>
      <tr>
        <th>序号&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>测试时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>焦虑值&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>结果&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
      </tr>
    </thead>
    <tbody id = "tb"></tbody>
  </table>
</div>
<canvas id="myChart" width="600" height="130"></canvas>

<script>

  $(function() {

    $.ajax({
      type : 'get',
      url : 'sas/selectAll',
      success : function(respDate) {
        
        //判断状态码
        if(respDate.code == 0) {
         //构造页面
		 buidHistoryHtml(respDate.data);
		 getValue(respDate.data);

        }else {
          $.toast({
            heading: '警告',
            text: respDate.message,
            icon: 'warning' 
          });
        }
      },
      error : function() {
        $.toast({
          heading: '错误',
          text: '服务器错误，请联系管理员',
          icon: 'error' 
        });
      }

    });

	function buidHistoryHtml(data) {
		let table = document.getElementById("tab1");
		let newRow = table.insertRow();

		let tbody = document.getElementById('tb');

		

		
		for(let i = 0; i < data.length; i++) {

			var trow = getDataRow(data[i]);
			tbody.appendChild(trow);
		}
	}

	function getDataRow(h){  
     var row = document.createElement('tr'); //创建行  
       
     var cellId = document.createElement('td'); //创建第一列id  
     cellId.innerHTML = h.id; //填充数据  
     row.appendChild(cellId); //加入行  ，下面类似  
       
     var cellCreateState = document.createElement('td');//创建第二列name  
     cellCreateState.innerHTML = h.createState;  
     row.appendChild(cellCreateState);  
       
     var cell_Anxiety_Score = document.createElement('td');//创建第三列job  
     cell_Anxiety_Score.innerHTML = h.anxiety_Score;  
     row.appendChild(cell_Anxiety_Score);  

	 var cellResult= document.createElement('td');//创建第三列job  
	 let num = h.anxiety_Score;
	 if(num < 50) {
		cellResult.innerHTML = "无明显焦虑";
	 }else if (num >=50 && num < 60) {
		cellResult.innerHTML = "轻度焦虑";
	 }else if (num >=60 && num < 70) {
		cellResult.innerHTML = "中度焦虑";
	 } else {
		cellResult.innerHTML = "重度焦虑";
	 }
	 row.appendChild(cellResult);  
	 
	 return row; //返回tr数据      
 }

 function getValue(postData) {
	const ctx = document.getElementById('myChart');
	const labels = [];
	const data1 = [];

	for(let i = 0; i < postData.length; i++) {
		labels[i] = postData[i].createState;
		data1[i] = postData[i].anxiety_Score;
	}

	console.log("查看数据结构集");
	console.log(labels);
	console.log(data1);

	if(postData.length == 0) {
		console.log("没有测评数据！");
		alert("您目前还没有该份问卷的测评记录，请先进行填写问卷！");
		return 0;
	} else {
		console.log("有一条以上的数据！");
		const data = {
			labels: labels,
			datasets: [{
				label: '焦虑值',
				data: data1,
                fill: false,
                borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
                tension: 0.1
			}]
		};
		const config = {
			type: 'line', // 设置图表类型
			data: data,
		};
		console.log("-------------------");
		const myChart = new Chart(ctx, config);
	}
 }
 


    //========================= 查询用户sas测评记录 =======================

  });
  
  
</script>